<template>
	<view>
        <!-- #ifdef MP-WEIXIN --> 
		<top-nav :inner-title="title" is-show-back="true" is-fixed="true" :navH="navH" :n="n" is-white="bg-white" opacity="1"></top-nav>
        <view :style="{height:navH + 'px'}"></view>
        <!-- #endif -->
        <view class="item_content delivery" v-if="order_info.rid">
            <view class="item_top flex">
                <image class="face_img" :src="order_info.face"></image>
                <view class="item_right">
                    <view class="dark_text name">{{order_info.nickname}}<icon class="deli_icon"></icon></view>
                    <view class="item_row flex">
                        <view class="dark_text arr_time">{{order_info.finish_time}} 送达</view>
                        <view class="light_text">评价对骑手匿名</view>
                    </view>
                </view>
            </view>
            <view class="item_bottom flex">
                <view class="dissatisfy_bt" :class="comment.r_type == 2 ? 'checked' : ''" @click="choseSatify(2)"></view>
                <view class="satisfy_bt"  :class="comment.r_type == 1 ? 'checked' : ''" @click="choseSatify(1)"></view>
            </view>
            <view class="satisfy_content" v-if="comment.r_type == 2">
                <view class="red_text">"请选择原因，我们会对骑手进行约束"</view>
                <view class="item_bt">
                    <view class="rea_bt" v-for="(item,index) in tag_list1" :key="index" :class="dissatisfy_rea.includes(item.id) ? 'checked' :''" :data-id="item.id" @click="choseDeliRea($event)">{{item.tag}}</view>
                </view>
              
            </view>
            <view class="satisfy_content" v-if="comment.r_type == 1">
                <view class="item_bt">
                    <view class="rea_bt" v-for="(item,index) in tag_list2" :key="index" :class="dissatisfy_rea.includes(item.id) ? 'checked' :''" :data-id="item.id" @click="choseDeliRea($event)">{{item.tag}}</view>
                    <view class="rea_bt plank"></view>
                </view>
               
            </view>
            <view class='edit flex' v-if="comment.r_type == 1 || comment.r_type == 2">
                <view class="bg flex column">
                    <textarea maxlength="150" :value="comment.r_content" @input="inputEvent" placeholder-style="font-size: 30rpx;margin:30rpx 0 0 20rpx;color:#999" placeholder="您的反馈会督促我们做的更好" :data-id="1"></textarea>
                   
                   <!-- #ifdef MP-WEIXIN -->
                  <view class="count">{{deli_cursor}}/150</view>
                   <!-- #endif -->
                </view>
            </view>
        </view>
        <view class="item_content store">
            <view class="item_top flex">
                <image class="face_img" :src="img_path"></image>
                <view class="item_right">
                    <view class="item_row flex">
                        <view class="dark_text arr_time ellipsis">{{shop_name}}</view>
                        <view class="dark_text font28 flex" @click="chooseAnony()">
                            <icon class="gray-ck-icon" :class="comment.anonymous == 1 ? 'checked':''"></icon>
                            <text>匿名评价</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="item_bottom flex column">
                <view class="flex dark_text store_comment">{{store_comment[comment.score]}}</view>
                <view class="star_con">
                    <view class="icon" :class=" item < comment.score ? 'star_yellow' : 'star_gray'" v-for="item in 5" @click="chooseStoreStars(item+1)" :data-index="item+1" :key="item"></view>
                </view>
                <view class="flex column detail_star" v-if="comment.score>0">
                    <view class="item flex">
                        <view class="light_text ti">包装</view>
                        <view class="star_con">
                            <view class="icon" :class=" item < comment.pack ? 'star_yellow' : 'star_gray'" v-for="item in 5" @click="choosePacketStars(item+1)" :data-index="item+1" :key="item"></view>
                        </view>
                        <view class="light_text">{{store_comment[comment.pack]}}</view> 
                    </view>
                    <view class="item flex">
                        <view class="light_text ti">味道</view>
                        <view class="star_con">
                            <view class="icon" :class=" item < comment.taste ? 'star_yellow' : 'star_gray'" v-for="item in 5" @click="chooseTasteStars(item+1)" :data-index="item+1" :key="item"></view>
                        </view>
                        <view class="light_text">{{store_comment[comment.taste]}}</view> 
                    </view>
                </view>
                <view class='edit flex'>
                    <view class="bg flex column">
                        <textarea maxlength="150" :value="comment.s_content" @input="inputEvent" placeholder-style="font-size: 30rpx;margin:30rpx 0 0 20rpx;color:#999" placeholder="亲爱的同学,您对此餐品的口味和包装满意吗？"  :data-id="2"></textarea>
                        <view class="count">
                            <block v-if="this.cursor<5 && this.cursor> 0">商家评价最少5个字</block>
                            <!-- #ifdef MP-WEIXIN -->
                            <!-- <block v-else>{{cursor}}/150</block> -->
                            <!-- #endif -->
                            
                        </view>
                    </view>
                </view>
                <view class="take_picture flex" v-if=" imgList.length == 0 ">
                   
                    <view class="picture_bt" @click="takePhoto()" v-if="imgList.length<9"></view>
                    <view class="picture_tip" v-if="!showCamera">
                        <view class="dark_text">上传图片</view>
                        <view class="light_text">内容丰富的评价有机会成为优质评价哦</view>
                    </view>
                </view>
                <view class="take_picture" v-else>
                    <view class="comment_img" v-for="(item,index) in imgList" :key="index">
                        <image class="" :src="item"  mode="aspectFill"></image>
                        <view class="delete_icon flex" @click="deleteImg(index)"></view>
                    </view>
                     
                    <view class="picture_bt" @click="takePhoto()" v-if="imgList.length<9"></view>
                    
                </view>
            </view>   
        </view>
        <view class="submit flex" :class=" isOK ? 'green':'' " @click="submit()">{{submit_tip}}</view>
        <view style="height: 96rpx;"></view>
        
         <view class='group-detail-box' v-if="showBox">
                <view class="group-mask"></view>
                <view class="group-detail-medium white_bg">
                    <view class="content">
                        <view class="title">确认关闭评价</view>
                      <text>关闭后当前评价信息不会保留</text>
                    </view>
                    <view class="bottom flex_Row">
                        <button class="black_text" hover-class="none" @click="closeCanBox()">关闭评价</button>
                        <button class="green_text" hover-class="none" @click="confirmCanBox()">再想想</button>
                    </view>
                </view>
        </view>

	</view>
</template>

<script>
    import uniFly    from 'unifly';
	import request   from '../../common/request.js';
	import $api_base from '../../api/api_base.js';
	import topNav    from '@/template/topnav/index.vue';
	import event     from '../../common/event.js';
	export default {
		components: { topNav },
		data() {
			return {
				navH: 0,
				n: 0,
				title:'评价',
                order_info:'',
                img_path:'',
                shop_name:'',
                comment:{ 
                    order_type: '',
                    order_id:0,
                    u_id:0,
                    s_id:0,
                    r_id:'',
                    r_score:0,
                    r_content:'',
                    r_type:0,
                    r_tag:'',
                    anonymous:2,
                    score:0,
                    pack:0,
                    taste:0,
                    s_content:'',
                    img_url:{}
                },
                dissatisfy_rea:[],
                deli_cursor:0,
                cursor:0,
                store_comment:[ '','“非常差”', '“差”', '“一般”', '“满意”','“超赞”'],
                imgList:[],
                showCamera:false,
                tag_list1:[],
                tag_list2:[],
                submit_tip:'提交评价',
                isOK: false,
                showBox: false,
                productInfo:''
			}
		},
		onLoad: function (options) {
            console.log(options);
			this.navH	  = getApp().globalData.navHeight;
			this.n		  = getApp().globalData.n;
            this.comment.order_id    = options.order_no || 0;
            this.comment.s_id        = options.storeId || 0;
            this.comment.u_id        = uni.getStorageSync('openid');
            this.comment.order_type = options.serviceType == 0 ? 1 : 2;
            
            this.loadComentInfo();
		},
        onShow(options){
            // console.log(options);
            //     var from = options.from || '';
            // if (options.from === 'navigateBack') {
            //   uni.navigateBack()
            // }
        },
		methods:{
            loadComentInfo: function(){
                var self = this;
                $api_base.post($api_base.evaluationInfo,{order_id: self.comment.order_id, order_type: self.comment.order_type}).then(function(res) {
                    let data = res.data;
                    if (data.ok == 1) {
                        if(data.data.order_info){
                            self.comment.r_id = data.data.order_info.rid || '';
                            self.order_info   = data.data.order_info || '';
                        }
                        if(data.data.order_info){
                            self.img_path     = data.data.stroe_info.img_path || '';
                            self.shop_name    = data.data.stroe_info.shop_name || '';
                        }
                        
                        if(data.data.tags_list.length>0){
                            let list = data.data.tags_list;
                            for(let i in list){
                                if(list[i].score == 1){       
                                    self.tag_list1.push(list[i]);
                                }else{ 
                                    self.tag_list2.push(list[i]);
                                }
                            }
                        }
                    }else{   
                    }
                })
            },
            choseSatify:function(e){
                this.comment.r_type = e;
                this.comment.r_content = '';
                this.comment.r_score = 0;
                this.dissatisfy_rea = [];
                if(this.comment.r_type == 1){  //满意
                    this.comment.r_score = this.comment.r_score + 4;
                }else if(this.comment.r_type == 2){
                    this.comment.r_score = this.comment.r_score + 1;
                }
                this.loadSubmitTip();
            },
            choseDeliRea:function(e){
                var val = e.currentTarget.dataset.id;
                var arr = this.dissatisfy_rea;
                if(!arr.includes(val)){
                    arr.push(val);
                }else{
                    arr.splice(arr.findIndex(item => item === val), 1)
                }
                this.dissatisfy_rea = arr;
                
                this.loadSubmitTip();
            },
            inputEvent: function(e){
                var id = e.currentTarget.dataset.id;
                if(id==1){   //骑手评价
                    this.comment.r_content = e.detail.value;
                    this.deli_cursor = e.detail.cursor;
                    var text = this.comment.r_content.replace(/\s+/g,"");
                    if(text.length > 150) return false;
                    this.comment.r_content = this.comment.r_content.replace(/^\s+|\s+$/g,""); 
                    this.deli_cursor= text.length;
                }else{
                    this.comment.s_content = e.detail.value;
                    this.cursor = e.detail.cursor;
                    var text = this.comment.s_content.replace(/\s+/g,"");
                    if(text.length > 150) return false;
                    this.comment.s_content = this.comment.s_content.replace(/^\s+|\s+$/g,"");
                    this.cursor = text.length;
                } 
                this.loadSubmitTip();
            },
            chooseAnony: function(){
                this.comment.anonymous = this.comment.anonymous == 1 ? 2 : 1;
            },
            chooseStoreStars: function(e){ 
                this.comment.score = e;
                
                if(this.comment.score == 5){
                    this.comment.pack = 5;
                    this.comment.taste = 5;
                }
                this.loadSubmitTip();
            },
            choosePacketStars: function(e){
                this.comment.pack = e;
                this.loadSubmitTip();
            },
            chooseTasteStars: function(e){
                this.comment.taste = e;
                this.loadSubmitTip();
            },
            takePhoto: function() {
                var self = this;
                uni.chooseImage({
                    count: 9, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                        var tempFilePaths = res.tempFilePaths;
                         // uni.showToast({  
                         //        title: '正在上传...',  
                         //        icon: 'loading',  
                         //        mask: true,  
                         //        duration: 10000  
                         //      })  
                        var uploadImgCount = 0
                        for(let i in tempFilePaths){
                            uni.uploadFile({
                                url:'https://up.birdback.org/photo/index',
                                filePath: tempFilePaths[i],
                                name:'file',
                                formData:{
                                    'imgIndex': 0
                                },
                                header: {  
                                    "Content-Type": "multipart/form-data"  
                                },
                                success: function (res) {  
                                    var data = JSON.parse(res.data);  
                                    //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }  
                                    if(data.ok == 1){
                                        uploadImgCount++; 
                                        self.imgList.push(data.big_img_url);
                                      //  self.comment.img_url.i = data.big_img_url;
                                        //if (uploadImgCount == tempFilePaths.length) {
                                           // uni.hideToast(); 
                                       // } 
                                    }
                                  },  
                                  fail: function (res) {  
                                   // uni.hideToast();  
                                    uni.showModal({  
                                      title: '错误提示',  
                                      content: '上传图片失败',  
                                      showCancel: false,  
                                      success: function (res) { }  
                                    })  
                                  }  
                            })
                        }
                    }
                })
                self.loadSubmitTip();
            },
            
            deleteImg: function(e){
                var arr= this.imgList;
                arr.splice(arr.findIndex(item => item === e), 1);
                this.imgList = arr;
                this.loadSubmitTip();
            },
            loadSubmitTip: function(){
                var self = this;
                self.isOK = false;
                this.comment.r_score = 0;
                if(self.order_info.rid){
                    if(self.comment.r_type == 1){
                        this.comment.r_score = this.comment.r_score + 4;
                    }else{
                        this.comment.r_score = this.comment.r_score + 1;
                    }
                    if(self.dissatisfy_rea.length>0){
                        const index = self.dissatisfy_rea.findIndex(item => item == 1);
                        if(index>-1){
                            this.comment.r_score --
                        }else{
                            if(this.comment.r_type == 1){  //满意
                                this.comment.r_score = this.comment.r_score + 0.5;
                            }else if(this.comment.r_type == 2){
                                this.comment.r_score = this.comment.r_score - 0.5;
                            }
                        }  
                    }
                    if(this.comment.r_content.length>0){
                        if(this.comment.r_type == 1){  //满意                       
                            this.comment.r_score = this.comment.r_score + 0.5;
                        }else if(this.comment.r_type == 2){
                            this.comment.r_score = this.comment.r_score - 0.5;
                        }
                    } 
                    if(self.comment.r_type == 0){ 
                        self.submit_tip = '请评价骑手服务';
                        return
                    }
                    if(self.comment.r_type == 2 && self.dissatisfy_rea.length == 0){
                        self.submit_tip = '请选择骑手问题';
                        return
                    }  
                }
                if(self.comment.score == 0){
                    self.submit_tip = '请评价商家';
                    return
                }
                if(this.cursor<5 && this.cursor> 0){
                    self.submit_tip = '商家评价最少五个字';
                    return
                }
                if(self.comment.score > 0 && self.comment.score < 5 && (self.comment.pack == 0 || self.comment.taste == 0)){
                    self.submit_tip = '请(包装、味道）评分';
                    return
                }
                if(self.imgList.length > 9){
                    self.submit_tip = '最多上传9张图片';
                    return
                } 
                self.isOK = true;
                self.submit_tip = '提交评价';
            },
            submit: function(){
                var self = this;
                self.loadSubmitTip();
                if(!self.isOK) return
                self.comment.r_tag = self.dissatisfy_rea.join();
                this.comment.r_score = this.comment.r_score < 0 ? 0 : this.comment.r_score;
                self.comment.img_url = JSON.stringify(self.imgList);
                var param = self.comment;
                $api_base.post($api_base.storeEvaluation,param).then(function(res) {
                    let data = res.data;
                    if (data.ok == 1) {
                        uni.showToast({
                            title: '评价成功',
                            duration:1000
                        });
                        setTimeout(function(){
                            uni.navigateTo({
                                url:'/pagesOther/comment/comment-success/index?score=' + self.comment.score 
                            })
                        },1500);
                    }else{
                         uni.showToast({
                            title: data.msg,
                            duration:1000
                        });
                    }
                })
            },
            closeCanBox:function(){
                this.showBox = false;
                uni.navigateBack()
            },
            confirmCanBox:function(){
                this.showBox = false;
            }
		},
        // onHide:function(){
        //     this.showBox = true;
        //     return
        // }
	}
</script>
<style>
  page {
  background-color: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
	@import 'index.scss';
</style>
